<template>
    <div>应用场景：当页面存在长表单时，用户点击浏览器后退、刷新按钮时，弹窗提示用户表单资料可能丢失。</div>
    <br>
    <div>
        <p>具体思路：出于安全问题，浏览器并不支持通过js拦截浏览器的前进后退操作，所以直接用js并不能实现拦截。</p>
        <p>我们可以在页面加载的时候，使用 history.pushState 这个API给页面添加一个当前页面的历史记录（不会导致页面刷新），此时最近的两条历史记录都是当前页面，当用户点击后退的时候，浏览器会退到上一个记录（还是当前页面），这时会触发 popstate事件 ，回退的时候再往历史记录里添加一条当前页面的记录（为了下次拦截使用），同时我们使用弹窗提示用户一些信息，如果用户确定要回退，我们再使用 history.go(-2) 跳过这两条当前页面的记录，返回到真正的上个页面，这样我们就成功模拟了回退操作的拦截。</p>

    </div>

</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
console.log("🚀 ~ history:", history)

onBeforeMount(() => {
    window.addEventListener('popstate', () => {
        const res = confirm('您确定要回退吗？')
        if (res) {
            history.go(-2)
        } else {
            history.pushState(null, null, location.href)
        }
    })

})
</script>
<style scoped lang='less'>
    
</style>